window.onload = function(){
    var container = document.getElementById("container");
    var canvas = document.createElement("canvas");
    canvas.width = container.scrollWidth;
    canvas.height = container.scrollHeight;
    container.appendChild(canvas);

    var gl = canvas.getContext("webgl");
    gl.clearColor(.0,.0,.0,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    
    var VERTEX_SHADER_SOURCE = 
    "attribute vec4 a_Position;\n" +
    "void main(){\n" +
    "gl_Position = a_Position;\n" +
    "gl_PointSize = 5.0;\n" +
    "}\n";

    var FRAGMENT_SHANDER_SOURCE = 
    "void main(){\n" +
    "gl_FragColor = vec4(1.0,1.0,1.0,1.0);\n" +
    "}\n";

    var vertex_shader_object = gl.createShader(gl.VERTEX_SHADER);
    var fragment_shander_object = gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(vertex_shader_object,VERTEX_SHADER_SOURCE);
    gl.shaderSource(fragment_shander_object,FRAGMENT_SHANDER_SOURCE);

    gl.compileShader(vertex_shader_object);
    gl.compileShader(fragment_shander_object);

    var program = gl.createProgram();

    gl.attachShader(program, vertex_shader_object);
    gl.attachShader(program,fragment_shander_object);

    gl.linkProgram(program);
    gl.useProgram(program);

    coordsCollection = [];

    canvas.onclick = function(e){
        var clientX = e.clientX;
        var clientY = e.clientY;
        var x = (clientX - canvas.width / 2) / (canvas.width / 2);
        var y = (canvas.height / 2 - clientY) / (canvas.height / 2);
        coordsCollection.push(x,y);
        if(coordsCollection.length== 4){
            var reacangle = [];
            reacangle = [
                coordsCollection[0], coordsCollection[3],
                coordsCollection[0], coordsCollection[1],
                coordsCollection[2], coordsCollection[3],
                coordsCollection[2], coordsCollection[1],
            ]
            var vertices = new Float32Array(reacangle);
            var vertexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, vertices,gl.STATIC_DRAW);
            var a_Position = gl.getAttribLocation(program, "a_Position");
            gl.vertexAttribPointer(a_Position,2, gl.FLOAT,false,0,0);
            gl.enableVertexAttribArray(a_Position);
            gl.clearColor(.0,.0,.0,1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, reacangle.length / 2)
            coordsCollection = [];
        };
    };
};